<script setup lang="ts">
import { computed } from "vue";
import { RouteLocationNormalized, useRoute } from "vue-router";
import useHomeStore from "@/pinia/modules/homeStore/homeStore.ts";

const route: RouteLocationNormalized = useRoute();

const homeStore = useHomeStore();



/*查找分类信息计算属性*/
const breadParams = computed(() => {
   const object:any= {};
   homeStore.categoryList.forEach(category => {
      if (category.children) {
         const subCategory = category.children.find(subcategory => subcategory.id === route.params.id);
         if (subCategory?.id === route.params.id) {
            object.cate = { id: category.id, name: category.name };
            object.sub = { id: subCategory?.id, name: subCategory?.name };
         }
      }
   });
   return object;
});
</script>

<template>
   <breadcrumb>
      <breadcrumb-item to="/">首页</breadcrumb-item>
      <transition name="slide-fade" mode="out-in">
         <breadcrumb-item to="/" :key="breadParams?.cate?.name">{{ breadParams?.cate?.name }}</breadcrumb-item>
      </transition>
      <transition name="slide-fade" mode="out-in">
         <breadcrumb-item :key="breadParams?.sub?.name">{{ breadParams?.sub?.name }}</breadcrumb-item>
      </transition>
   </breadcrumb>
</template>

<style scoped lang="less">

</style>
